<%@ page import="com.sbal89.map.util.BaseUtil" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Election Exchange Map</title>
    <script type="text/javascript">
    function getEmbedcode(w, h) {
        var target = document.getElementById("map");
        var code = '<iframe id ="map" width="'+w+'" height="'+h+'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://eemap-gen.appspot.com/<%=request.getAttribute(BaseUtil.R_TYPE)%>.gen?key=<%=request.getAttribute(BaseUtil.R_KEY)%>"></iframe>';
        target.style.width = w;
        target.style.height =h;
        return code;
    }
    
    function doResize(a, w, h) {
        document.myform.width.disabled=a;
        document.myform.height.disabled=a;
        document.myform.results.value = getEmbedcode(w,h);
    }
    
    function doSmall() {
        doResize(true, 300, 300);
    }
    
    function doMedium() {
        doResize(true, 425, 350);
    }
    
    function doLarge() {
        doResize(true, 640, 480);
    }

    function doCustom() {
        doResize(false, document.myform.width.value, document.myform.height.value);
    }
    </script>
  </head>
  <body style="font-family: tahoma, verdana, arial, sans-serif; font-size: 13px;">
    <h2>Embed Code</h2>
    <form name="myform">
    <p>1. Set map size:</p>
        <input type="radio" name="size" value="S" checked onClick="if(this.checked)doSmall()"> Small<br/>
        <input type="radio" name="size" value="M" checked onClick="if(this.checked)doMedium()" checked> Medium<br/>
        <input type="radio" name="size" value="L" onClick="if(this.checked)doLarge()"> Large<br/>
        <input type="radio" name="size" value="C" onClick="if(this.checked)doCustom()"> Custom<br/>
        Width: <input type="text" name="width" size="5" value="425" disabled onBlur="doCustom()"> Height: <input type="text" name="height" size="5" value="350" disabled onBlur="doCustom()">
    <hr/>
    <div id="mapdiv" name="mapdiv">
        <iframe id ="map" width="'300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://eemap-gen.appspot.com/<%=request.getAttribute(BaseUtil.R_TYPE)%>.gen?key=<%=request.getAttribute(BaseUtil.R_KEY)%>"></iframe>
    </div>
    <hr/>
    <p>2. Copy and paste this HTML to embed in your website:</p>
        <textarea rows="6" cols="50" id="results" wrap="on" readonly></textarea>
    </form>
    <p><a href='./map'>Done</a></p>
    <script type="text/javascript">
    var field = document.myform.size;
    for (i = 0; i < field.length; i++)
        if (field[i].checked) {
            if (field[i].value=="S") doSmall();
            else if (field[i].value=="M") doMedium();
            else if (field[i].value=="L") doLarge();
            else if (field[i].value=="C") doCustom();                
        }
    </script>
    
  <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12521178-1");
pageTracker._trackPageview();
} catch(err) {}</script>  
    
  </body>  
</html>
